<!DOCTYPE html >
<html>
<head>
<meta name="Generator" content="TPshop v1.1" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>名片分享编辑</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<!-- <link rel="stylesheet" href="../../css/footer.css"> -->
<link rel="stylesheet" href="../../css/font_my/iconfont.css">

<style type="text/css">
	body,html{
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		color:#555555;
		background: #eee;
	}
	p{
		margin: 0;
	}
	h4{
		margin: 0;
		line-height: 30px;
	}
	.bian{
		width: calc(100% - 20px);
		padding: 0 10px;
	}
	.shareYin{
		display: flex;
		background: #eee;
		line-height: 50px;
	}
	.shareYinL{
		width: calc(100% - 90px);
		font-weight: bold;
		font-size: 16px
	}
	.shareYinR{
		width: 90px;
		text-align: right;
	}
	textarea{
		width: 100%;
		height: 80px;
		resize: none;
		border:none;
	}
	.yanse{
		background: #fff
	}
	.aaP{
		text-align: right;
		color: #4f81d4;
		line-height: 35px
	}
	.shareBot{
		position: relative;
	}
	.shareBot img{
		width: 100%;

	}
	/*弹框*/
	.tants{
	    position: fixed;
	    top: 0;
	    margin: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(0,0,0,0.5);
	    display: none;
	  }
	  .ttzda{
	  	width: 100%;
	  	height: 100%;
	  	display: flex;
	  }
	  .ttz{
	    width: 90%;
	    height: 72%;
	    background: #fff;
	    border-radius: 5px;
	    margin-top: 15%;
	    margin-left: 5%;
	    align-items: center;
	    vertical-align: middle;
	    position: relative;
	  }
	  .ttzt{
	    line-height: 50px;
	    text-align: center;
	    border-bottom: 1px solid #eee;
	  }
	  .ttzdiv{
	    width: calc(100% - 20px);
	    height: calc(100% - 60px);
	    padding: 0 10px;
	    overflow-x: hidden;
	  }
	  .ttzone{
		border-bottom: 1px solid #eaeaea;
		margin: 10px 0;
	  }
	  .ttzBtn{
	    position: absolute;
	    top:5px;
	    right: 5px;
	    width: 30px;
	    height: 30px;
	    text-align: center;
	    line-height: 30px;
	  }

	  .sharelog{
		width: 180px;
		height: 25px;
		position: absolute;
		top: 6%;
		left: 23%;
		display: flex;
		/*background: red*/
	  }
	  .sharelogL{
	  	width: 25px;
	  	height: 25px;
	  }
	  .sharelogL img{
	  	width: 100%;
	  }
	  .sharelogR{
	  	text-indent: 10px;
	  	line-height: 25px;
	  }




</style>

</head>
<body>
	<div class="share">
		<div class="bian shareYin">
			<div class="shareYinL">分享文档内容编辑</div>
			<div class="shareYinR"><span class="areaK">0</span>/50</div>
		</div>
		<div class="bian yanse">
			<textarea name="" id="aa"></textarea>
			<p class="aaP">不会写简介？戳这里<i class='iconfont icon-arrow-right-copy'></i></p>
		</div>
		<div class="bian shareYin">
			<div class="shareYinL">效果展示</div>
			<div class="shareYinR"></div>
		</div>
		<div class="bian yanse shareBot">
			<img src="../../image/my/tb1.png" alt="">
			<div class="sharelog">
				<div class="sharelogL"><img src="../../image/my/logo.png" alt=""></div>
				<div class="sharelogR">新华杨科技</div>
			</div>
		</div>
	</div>
	<div class="tants">
		<div class="ttzda">
		    <div class="ttz">
		      <div class="ttzt">参考分享文案</div>
		      <!-- <div class="ttzi"></div> -->
		      <div class="ttzdiv">
		      	<div class="ttzone">
		      		<h4>商务通用型</h4>
		      		<p class="ttzP">你好，我是新华扬科技公司的张小一，这是我的电子名片，请惠存~</p>
		      	</div>
		      	<div class="ttzone">
		      		<h4>好买大气型</h4>
		      		<p class="ttzP">宝剑锋从磨砺出，梅花香自苦寒来，我是张小一，认识一下~</p>
		      	</div>
		      	<div class="ttzone">
		      		<h4>诗意委婉型</h4>
		      		<p class="ttzP">茫茫人海中遇见你是缘分，我是张小一，认识一下~</p>
		      	</div>
		      	<div class="ttzone">
		      		<h4>可爱害羞型</h4>
		      		<p class="ttzP">emmm…（害羞表情）大家好，我是新华扬科技的张小一，请大家多多关注哦~~</p>
		      	</div>
		     
		      </div>
		      <div class="ttzBtn"><i class="iconfont icon-cha ttzG"></i></div>
		    </div>
		</div>
	</div>
<script src='../../js/jquery.js'></script>
<script type="text/javascript">

	$(".aaP").click(function(){
	    $(".tants").css("display","block")
	})
	$(".ttzBtn").click(function(){
	    $(".tants").css("display","none")
	})
	// console.log($)

</script>
</body>
</html>